<template>
  <div class="environmental-monitoring">
    <ul class="title-wrap" @click="updateSelVal">
      <li :class="selVal == 1 ? 'active' : '1'">全局监控</li>
      <li :class="selVal == 2 ? 'active' : '2'">环境监控</li>
      <li :class="selVal == 3 ? 'active' : '3'">安防监控</li>
      <li :class="selVal == 4 ? 'active' : '4'">消防监控</li>
      <li :class="selVal == 5 ? 'active' : '5'">联动控制</li>
      <li :class="selVal == 6 ? 'active' : '6'">测温监控</li>
      <li :class="selVal == 7 ? 'active' : '7'">电力监控</li>
    </ul>
    <div class="content-wrap">
      <GlobalMonitoring v-if="selVal == 1" />
      <EnvironmentalMonitoring v-if="selVal == 2" />
      <SecurityMonitor v-if="selVal == 3" />
      <FireControl v-if="selVal == 4" />
      <GangedControl v-if="selVal == 5" />
      <Thermometry v-if="selVal == 6" />
      <PowerMonitor v-if="selVal == 7" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import GlobalMonitoring from "./components/GlobalMonitoring.vue";
import EnvironmentalMonitoring from "./components/EnvironmentalMonitoring.vue";
import Thermometry from "./components/Thermometry.vue";
import PowerMonitor from "./components/PowerMonitor";
import GangedControl from "./components/GangedControl";
import FireControl from "./components/FireControl";
import SecurityMonitor from "./components/SecurityMonitor";
let selVal = ref(6);

let updateSelVal = (e) => {
  if (e.target.classList[0] == "active") return;

  if (
    e.target.classList[0] != "1" &&
    e.target.classList[0] != "2" &&
    e.target.classList[0] != "3" &&
    e.target.classList[0] != "4" &&
    e.target.classList[0] != "5" &&
    e.target.classList[0] != "6" &&
    e.target.classList[0] != "7"
  ) {
    return;
  }

  selVal.value = e.target.classList[0];
};
</script>
<style lang="scss" scoped>
.environmental-monitoring {
  width: 100%;
  height: 100%;

  .title-wrap {
    padding-top: 19px;
    padding-left: 237px;
    padding-right: 259px;
    display: flex;
    justify-content: space-between;
    li {
      background: url("./images/title-bgc.png") no-repeat;
      width: 137px;
      height: 55px;
      background-size: cover;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #ffffff;
      text-align: center;
      line-height: 55px;
      cursor: pointer;
    }
    .active {
      background: url("./images/title-bgc-sel.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
